<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户编辑</title>
    <base href="http://localhost/resources/back/">

    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="pd-20">
    <form action="abc" method="post" class="form form-horizontal" id="form-admin-add">
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>用户名：</label>
            <div class="formControls col-5">
                <input type="text" th:value="${user.id}" hidden name="id">
                <input type="text" class="input-text" th:value="${user.username}" placeholder="" id="user-name" name="username" datatype="*2-16" nullmsg="用户名不能为空">
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>初始密码：</label>
            <div class="formControls col-5">
                <input type="password" placeholder="密码" autocomplete="off" th:value="${user.password}" name="password" class="input-text" datatype="*6-20" nullmsg="密码不能为空">
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-5">
                <input type="password" placeholder="密码" recheck="password" autocomplete="off" th:value="${user.password}" name="password" class="input-text" datatype="*6-20" nullmsg="密码不能为空">
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>性别：</label>
            <div class="formControls col-5 skin-minimal">
                <div class="radio-box">
                    <input type="radio" id="sex-1" value="男" th:checked="${user.sex=='男'}"  name="sex" datatype="*" nullmsg="请选择性别！">
                    <label for="sex-1">男</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-2" value="女" th:checked="${user.sex=='女'}"  name="sex">
                    <label for="sex-2">女</label>
                </div>
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>手机：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" th:value="${user.phone}" placeholder="" id="user-tel" name="phone"  datatype="m" nullmsg="手机不能为空">
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" th:value="${user.email}" placeholder="@" name="email" id="email" datatype="e" nullmsg="请输入邮箱！">
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>生日：</label>
            <div class="formControls col-5">
                <input type="text" readonly class="input-text" th:value="${#dates.format(user.birthday,'yyyy-MM-dd')}" datatype="*" name="birthday" id="birthday" onclick="WdatePicker({lang:'zh-cn'})"  nullmsg="请输入生日！">
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="http://localhost/resources/back/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript">
    $(function(){
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });
        // 1.用户填写表单
        // 2、用户点击提交按钮
        // 3、表单实现校验
        //         a)验证不通过，提示错误的信息
        //         b)验证通过表单不能自动提交，需要我们手动使用ajax提交
        $("#form-admin-add").Validform({
            tiptype:2,
            // //注意：如果不是ajax方式提交表单，传入callback，这时data参数是当前表单对象，回调函数会在表单验证全部通过后执行，
            // 然后判断是否提交表单，如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单。
            callback:function(form){
                // 在这里表单数据使用异步的方式提交
                // 1.把表单对象序列化成数组
                var fromArray = form.serializeArray();

                // 2.创建一个对象，把表单中的所有属性封装到param对象中
                var param = new Object();

                // 3.循环遍历数组，把数组中的值给他复制到param对象
                for (var i = 0; i < fromArray.length; i++) {
                    var name = fromArray[i].name; // 表单元素的name属性
                    var val = fromArray[i].value; // 表单元素对应的值

                    // 复制
                    param[name]=val; // 给param对象中设置属性
                }

                console.info(param);

                // 4.使用ajax发送param数据到后台
                $.post("http://localhost/back/user-back/update",param,function(data){
                    if (data.status=="succses") {
                        layer.msg("修改成功",{icon:1,time:1000},function() {
                            //操作成功以后回调此函数
                            // 获取添加用户页面的层的索引
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.$('.btn-refresh').click();
                            parent.layer.close(index);

                        })
                    }else{
                        layer.msg("修改失败",{icon:2,time:1000})
                    }
                },"JSON");
                // form[0].submit();
                // var index = parent.layer.getFrameIndex(window.name);
                // parent.$('.btn-refresh').click();
                // parent.layer.close(index);

                //这里使用ajax异步提交所以return false 表单不会提交
                return false;
            }
        });
    });
</script>
</body>
</html>